<template>
        <div class="container-bg">
         <!-- <div class="header-bg">
         </div> -->
        <div calss="container">
        <div class="login-logo-bg">
        </div>
        <div class="login-container">
            <img @click="toPath" class="close-btn" src="https://oss.jtmckj.com/Room/close.png" alt="">
            <div class="login-text-flex">
                  <img class="login-img" src="https://oss.jtmckj.com/Room/login-text.png" alt="">
                  <div class="text">酒水富德快·智能新生态</div>
              </div>
            <div class="cm-account-form">
                <!-- <div class="cm-cell">
                    <div class="cm-cell__label">
                        <img class="cm-cell-icon" :src="v_login_shop" alt="SVG Icon" />
                    </div>
                    <div class="cm-cell__value">
                        <input class="cm-cell-input" type="text" maxlength="5" placeholder="请输入店铺编号" v-model="postForm.orgname" />
                    </div>
                    <div class="cm-cell__control">
                        <img class="cm-cell-btn" :src="v_login_del" alt="SVG Icon" @click="onDel" />
                    </div>
                </div> -->
                <!-- <div class="cm-cell">
                    <div class="cm-cell__label">
                        <img class="cm-cell-icon" :src="v_login_account" alt="SVG Icon" />
                    </div>
                    <div class="cm-cell__value">
                        <input class="cm-cell-input" type="number" maxlength="11" placeholder="请输入手机号" @input="handleInput" />
                    </div>
                </div> -->
                <!-- <div class="cm-cell">
                    <div class="cm-cell__label">
                        <img class="cm-cell-icon" :src="v_login_password" alt="SVG Icon" />
                    </div>
                    <div class="cm-cell__value">
                        <input class="cm-cell-input" :type="passwordVisible ? 'password': 'text'" placeholder="请输入密码" autocomplete="new-password" v-model="postForm.password" />
                    </div>
                    <div class="cm-cell__control">
                        <img class="cm-cell-btn" :src="passwordVisible?i_password_show:i_password_hide" @click="passwordVisible=!passwordVisible" />
                    </div>
                </div> -->

                <!-- <van-field class="cm-vant-cell" v-model="postForm.orgname" type="digit" name="accout" maxlength="5" :left-icon="v_login_shop" placeholder="请输入店铺编号" autocomplete="off"  /> -->

                <van-field style="border-radius: 8px;" class="cm-vant-cell" v-model="postForm.username" type="text" name="accout" :left-icon="v_login_account" placeholder="请输入手机号/账号" autocomplete="off" />

                <van-field 
                    style="border-radius: 8px;"
                    class="cm-vant-cell" 
                    v-model="postForm.password" 
                    :type="passwordVisible ? 'password': 'text'" 
                    name="password"
                    :left-icon="v_login_password" 
                    placeholder="请输入密码" 
                    autocomplete="new-password" 
                    :right-icon="passwordVisible?i_password_hide:i_password_show" 
                    @click-right-icon="passwordVisible=!passwordVisible"
                ></van-field>

                <div class="cm-vant-checkbox">
                    <van-checkbox v-model="checked" shape="square" icon-size="16" style="padding-bottom: 5px;">
                        <template #icon>
                            <img class="cm-vant-checkbox__icon" :src="checked ? i_checkbox_checked : i_checkbox_check" />
                        </template>
                        记住密码
                    </van-checkbox>
                </div>

                <z-button-group top="30" style="padding-bottom: 40px;">
                    <z-button style="border-radius:8px;" bold :disabled="isAllValuesPresent" @click="onSubmit">登录</z-button>
                </z-button-group>
                 
                <div class="footer-text-poa">
                    <div class="cm-public-footer">
                癸卯兔科技发展集团 
               </div> 
                <div class="cm-public-footer"> 
                    极兔妙创网络科技 技术支持
                </div>
                </div>
            </div>
        </div>
        </div>
        </div>
</template>
<script setup>
import { showToast } from 'vant';
import useAppStore from '@/store/app'
import ls from '@/lib/ls'
import Api from '@/api'
import { validateMobile } from '@/lib/util.js'

// import i_logo from '@/assets/images/account/logo.png'
import i_logo_bg from '@/assets/images/account/logo-bg.png'
import i_logo from '@/assets/images/account/logo2.png'
import v_login_shop from '@/assets/svg/account/v_login_shop.svg'
import v_login_del from '@/assets/svg/account/v_login_del.svg'
import v_login_account from '@/assets/svg/account/v_login_account.svg'
import v_login_password from '@/assets/svg/account/v_login_password.svg'
import i_password_hide from '@/assets/images/account/i_password_hide.png'
import i_password_show from '@/assets/images/account/i_password_show.png'
import i_checkbox_check from '@/assets/images/account/i_checkbox_check.png'
import i_checkbox_checked from '@/assets/images/account/i_checkbox_checked.png'

const router = useRouter()
const appStore = useAppStore()
const checked = ref(false)

const postForm = reactive({
    username: '',
    password: '',
})

const onDel = function() {
    postForm.orgname = undefined
}

const passwordVisible = ref(true)

const isAllValuesPresent = computed(() => {
    return Object.values(postForm).some(v => v == undefined || v == null || v == '');
});

const handleInput = ()=> {
    // 处理输入逻辑
  postForm.username = String(postForm.username).replace(/\D/g, '');

  if (postForm.username.length > 11) {
    postForm.username = postForm.username.slice(0, 11);
  }
}

const onSubmit =  () => {
    if (unref(isAllValuesPresent)) return
    // if (!validateMobile(postForm.username)) return
    
    if (unref(checked)) {
        ls.set('LOGIN_FORM', postForm)
    }else {
        ls.remove('LOGIN_FORM')
    }
    ls.set('LOGIN_VALUE',postForm)
   
    Api.Account.GetStore.Do(postForm).then((res) => {
        console.log(res);
        if(res.result[0]){
            ls.set('STORE_LIST', res.result)
            router.replace({
                path: '/login/store'
            })
        }else{
            showToast('未授权门店，请联系管理员')
        }
        
    })
    
    // appStore.Login(postForm).then(() => {
    //     router.replace({
    //         path: '/login/store'
    //     })
    //     showToast('登录成功')
    // })
};

const onInit = ()=>{
    const form = ls.get('LOGIN_FORM')
    if (form) {
        Object.assign(postForm, form);
        checked.value = true
    }
}
onInit()


const toPath = () => {
router.push({
    path: `/workbench`,
})
}

</script>
<style scoped lang="scss">
.container {
            position: relative;
        }

.login-logo-bg {

      position: absolute;
      top: 0;
      &__cover {
          padding-top: 0px;
          height: 176px;
          width: 100%;
    }

    }

.login-container {
    height: 375px;
    background: url('https://oss.jtmckj.com/Room/login-bg.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    .close-btn {
        position: absolute;
        right: 12px;
        top: 12px;
        width: 24px;
        height: 24px;
    }
    .login-logo {
        padding-top: 42px;

        &__cover {
            display: block;
            margin: auto;
            width: 90px;
            height: 56px;
        }
    }
    .login-title-one{
        font-family: Source Han Sans CN;

        font-weight: bold;
        font-size: 16px;
        color: #C3870E;
        line-height: 16px;
        text-align: top;
        // margin-top: 20px;
      //  padding-top: 20px;
    }
    .login-title-two{
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 16px;
        color: #67490E;;
        line-height: 16px;
        text-align: top;
        padding-top: 10px;
    }
}

.header-bg {
    height: 44px;
    background: #17171A;
}
.container-bg {
    height: 100%;
    background: #2e2e33;
    .login-text-flex {
        padding: 134px 0 0 29.5px;
        display: flex;
        flex-direction: column;
        .text {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 13px;
            color: #CCCCCC;
            line-height: 15px;
        }
        .login-img {
            width: 193px;
            height: 25px;
            margin-bottom: 12px;
        }
    }
}
.cm-account-form {
    position: relative;
    margin-top: 50px;
    padding: 50px 32px 0 32px ;
    height: 100%;
    background: #2e2e33;
    border-radius: 20px 20px 0 0 ;
    .footer-text-poa {
        // position: absolute;
        // bottom:200px ;
        // left: 0;
        // right: 0;
        padding-top: 30px;
        .cm-public-footer ,.cm-company-footer{
            color: #999999;
            font-size: 12px;
        }
    }
}
</style>
